<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/common/_includes.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"/>
<div class="ui grid">
    <div class="row">
        <div class="column">
            <div class="ui two column grid">
                <div class="three wide column">
                    <jsp:include page="/WEB-INF/jsp/common/_sidebar.jsp">
                        <jsp:param name="index" value="203"/>
                    </jsp:include>
                </div>
                <div id="container" class="thirteen wide column">
                    <ol class="breadcrumb">
                        <li><a href="/">后台管理</a></li>
                        <li><a href="/room">房间管理</a></li>
                        <li class="active">分类管理</li>
                    </ol>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th> <input type="checkbox" name="checkAll" />  </th>
                            <th>ID</th>
                            <th>分类名称</th>
                            <th>房间数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${dataDictionaries}" var="data">
                            <tr data-id="${data.code }">
                                <td><input type="checkbox" /></td>
                                <td>${data.code}</td>
                                <td>${data.text}</td>
                                <td>${data.count}</td>
                                <td>
                                    <c:if test="${data.count > 0}">
                                        <a class="btn btn-info js_broadcast" data-id="${data.code }" data-loading-text="发送中">广播</a>
                                    </c:if>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="ui">
                        <div class="ui green mini button js_batch_media">群发广播</div>
                    </div>
                    <div class="page-info clearfix">
                        <jsp:include page="/WEB-INF/jsp/common/_page.jsp"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/WEB-INF/jsp/common/_foot.jsp"></jsp:include>
<script type="text/javascript" src="/static/js/plate-list.js"></script>
<script type="text/javascript" >
    $(function(){
        /**
        * 根据板块获取房间的id信息，，1001 表示板块的code
         * 多个板块用 1001_1002 格式请求
         * 获得的结果为：[1, 2, 3, 41] 房间id
         */
        function a(){
            $.get('/plate/1001/queryRoom', {

            }, function(res){
                if(res.status == 'ok'){
                    console.log(res.roomIds)
                }
            });
        }
        $('.js_broadcast2').click(function(){
           a();
        });
        $('.js_broadcast2').qtip({
            content: {
                title: '广播',
                text: '<div class="mt5"><textarea name="content"/></div>\
						<div class="mt5 clearfix"><button class="js_send pull-right" data-loading-text="发送中...">发送</button></div>'
                ,button: true
            },
            show: {
                event: 'click',
                modal : {
                    on : true,
                    blur : true
                }
            },
            hide: {
                event: 'unfocus'
            },
            style: {
                classes : 'qtip-broadcast qtip-light'
            },
            position: {
                my: 'center', at: 'center',
                target : $(window)
            },
            events: {
                render: function(event, api){
                    $('button', api.elements.content).click(function(e) {
                        var roomId = $(api.elements.target).data('id'),
                                content = $('textarea', api.elements.content).val(),
                                self = $(this);
                        if(content.trim() == ''){
                            return;
                        }
                        self.button('loading');
                        sendMessage(content, roomId, function(data){
                            $.post('/message/send', {
                                content: content,
                                roomId: roomId
                            }, function(res){
                                if(res.status == 'ok'){
                                    $('textarea', api.elements.content).val('')
                                    self.button('reset');
                                    api.hide();
                                }
                            });
                        });

                    });
                }
            }
        });

        $('.js_batch_media').click(function(){
            if($('input[type=checkbox]:checked').length == 0){
                Confirm('提示', '您尚未选择房间，是否发送全局消息？', function(){
                    qtip.qtip('show');
                });
            }else {
                qtip.qtip('show');
            }
        });

        var qtip = $('<div/>').qtip({
            content: {
                title: '群发广播',
                text: '<div class="mt5"><textarea name="content"/></div>\
						<div class="mt5 clearfix"><button class="js_send pull-right" data-loading-text="发送中...">发送</button></div>',
                button: true
            },
            show: {
                event: 'click',
                modal : {
                    on : true,
                    blur : true
                }
            },
            hide: {
                event: 'unfocus'
            },
            style: {
                classes : 'qtip-broadcast qtip-light'
            },
            position: {
                my: 'center', at: 'center',
                target : $(window)
            },
            events: {
                render: function(event, api){
                    $('button', api.elements.content).click(function(e) {
                        var content = $('textarea', api.elements.content).val(),
                                self = $(this);
                        if(content.trim() == ''){
                            return;
                        }
                        self.button('loading');

                        var ids = [];
                        $.each($('input[type=checkbox]:checked'), function(i, input){
                            ids.push($(input).closest('tr').data('id'));
                        });

                        sendMessage(content, function(data){
                            $.post('/message/send', {
                                content: content,
                                roomId: ids.length > 0 ? ids.join('_') : null
                            }, function(res){
                                if(res.status == 'ok'){
                                    $('textarea', api.elements.content).val('')
                                    self.button('reset');
                                    api.hide();
                                }
                            });
                        });

                    });
                }
            }
        });

        $('input[name=checkAll]').click(function(){
            if($(this).is(':checked')){
                $('tbody input[type=checkbox]').attr("checked",'checked');
            }else{
                $('tbody input[type=checkbox]').attr("checked",false);
            }
        });
    });
</script>

